<template>
  <div class="container_detail word-edit">
    <div class="header">
      <p>单词列表>{{id?'单词编辑':'新增单词'}}</p>
      <el-button class="link" type="primary">
        <router-link :to="{name:'wordList',params: { currentPage: currentPage }}" style="color: #fff;">返回</router-link>
      </el-button>
    </div>
    <div class="main">
      <el-form :model="user" :rules="rules" ref="user" label-width="120px" class="">
        <div class="list">
          <div class="title">单词详情</div>
          <el-form-item prop="seqId">
            <div class="item">
              <div class="item-key">序号:</div>
              <div class="item-value">
                <el-input v-model="user.seqId" placeholder="请输入"></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="letter">
            <div class="item">
              <div class="item-key">字母分类:</div>
              <div class="item-value">
                <el-input v-model="user.letter" placeholder="请输入"></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="wordStock">
            <div class="item">
              <div class="item-key">词库名称:</div>
              <div class="item-value">
                <el-input v-model="user.wordStock" placeholder="请输入"></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="knowledgeType">
            <div class="item">
              <div class="item-key">知识分类:</div>
              <div class="item-value">
                <el-select v-model="user.knowledgeType" filterable placeholder='-请选择-'>
                  <el-option v-for="(item,index) in loadArr" :key="index" :label="item.value" :value="item.key"></el-option>
                </el-select>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="knowledgeNum">
            <div class="item">
              <div class="item-key">知识点编号:</div>
              <div class="item-value">
                <el-input v-model="user.knowledgeNum" placeholder="请输入"></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="english">
            <div class="item">
              <div class="item-key">英文:</div>
              <div class="item-value">
                <el-input v-model="user.english" placeholder="请输入"></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="speech">
            <div class="item">
              <div class="item-key">词性:</div>
              <div class="item-value">
                <el-input v-model="user.speech" placeholder="请输入"></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="chinese">
            <div class="item">
              <div class="item-key">中文:</div>
              <div class="item-value">
                <el-input v-model="user.chinese" placeholder="请输入"></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="engParaphrase">
            <div class="item">
              <div class="item-key">英文释义:</div>
              <div class="item-value">
                <el-input v-model="user.engParaphrase" placeholder="请输入"></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="chiParaphrase">
            <div class="item">
              <div class="item-key">中文释义:</div>
              <div class="item-value">
                <el-input v-model="user.chiParaphrase" placeholder="请输入"></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="soundmark">
            <div class="item">
              <div class="item-key">音标:</div>
              <div class="item-value">
                <el-input v-model="user.soundmark" placeholder="请输入"></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="exampleEng">
            <div class="item">
              <div class="item-key">例句:</div>
              <div class="item-value">
                <el-input v-model="user.exampleEng" placeholder="请输入"></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="exampleTranslate">
            <div class="item">
              <div class="item-key">例句翻译:</div>
              <div class="item-value">
                <el-input v-model="user.exampleTranslate" placeholder="请输入"></el-input>
              </div>
            </div>
          </el-form-item>
           <el-form-item prop="referenceData">
            <div class="item">
              <div class="item-key">参考文献:</div>
              <div class="item-value">
                <el-input v-model="user.referenceData" placeholder="请输入"></el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button style="margin:20px 30%;" type="primary" @click="handleSave('user')">保存</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");

export default {
  data() {
    return {
      id: "",
      info: "",
      // 返回 导航页码
      currentPage: 1,
      dialogVisible: false,
      pictureUrl: "",
      user: {
        chiParaphrase: "",
        chinese: "",
        engParaphrase: "",
        english: "",
        exampleEng: "",
        exampleTranslate: "",
        id: "",
        knowledgeNum: "",
        knowledgeType: "",
        letter: "",
        seqId: "",
        soundmark: "",
        speech: "",
        wordStock: "",
        referenceData:""
      },
      rules: {
        seqId: [{ required: true, message: "请输入序号", trigger: "blur" }],
        letter: [
          { required: true, message: "请输入字母分类", trigger: "blur" }
        ],
        wordStock: [
          { required: true, message: "请输入词库名称", trigger: "blur" }
        ],
        knowledgeType: [
          { required: true, message: "请选择知识分类", trigger: "blur" }
        ],
        knowledgeNum: [
          { required: true, message: "请输入知识点编号", trigger: "blur" }
        ],
        english: [{ required: true, message: "请输入英文", trigger: "blur" }],
        // speech: [{ required: true, message: "请输入词性", trigger: "blur" }],
        chinese: [{ required: true, message: "请输入中文", trigger: "blur" }],
        engParaphrase: [
          { required: true, message: "请输入英文释义", trigger: "blur" }
        ],
        chiParaphrase: [
          { required: true, message: "请输入中文释义", trigger: "blur" }
        ],
        // soundmark: [{ required: true, message: "请输入音标", trigger: "blur" }],
        exampleEng: [
          { required: true, message: "请输入例句", trigger: "blur" }
        ],
        // exampleTranslate: [
        //   { required: true, message: "请输入例句翻译", trigger: "blur" }
        // ]
      },
      loadArr: []
    };
  },
  mounted() {
    this.id = this.$router.currentRoute.query.id;
    this.currentPage = this.$router.currentRoute.query.pageIndex
      ? this.$router.currentRoute.query.pageIndex
      : 1;
    if(this.id){
      this.getDetail();
    }
    this.getDictList();
  },
  methods: {
    getDictList() {
      let url = CONSTANT.URL.SYSTEM.LOADLIST;
      common.requestAjax(url, null, { codeType: "knowledge" }, res => {
        this.loadArr = res.data.bussData;
      });
    },
     getDetail() {
      let url = CONSTANT.URL.LIST.WORDDETAIL;
      common.requestAjax(url, null, { id: this.id }, res => {
        this.user = res.data.bussData;
      });
    },
    auditChange(id, state) {
      let url = CONSTANT.URL.LIST.SAVEWORD;
      common.requestAjax(url, null, this.rules, res => {
        if (res.status == 200) {
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.getDetail();
        } else {
          this.$message({
            type: "warning",
            message: res.msg
          });
        }
      });
    },
    checkImage(url) {
      this.pictureUrl = url;
      this.dialogVisible = true;
    },
    handleSave: function(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let url = CONSTANT.URL.LIST.SAVEWORD;
          common.requestAjax(url, JSON.stringify(this.user), null, res => {
            if (res.status == 200) {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.$router.push({
                path: "/wordList",
                query: { currentPage: this.currentPage }
              });
            } else {
              this.$message({
                type: "warning",
                message: res.msg
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss">
.word-edit {
  .el-form-item {
    margin: 0px;
  }
  .el-form-item__error {
    top: 33%;
    left: 59%;
  }
  .item-value {
    .el-input {
      width: 50%;
    }
    .el-select {
      width: 50%;
      .el-input {
        width: 100%;
      }
    }
  }
  .el-form-item__content {
    margin: 0px !important;
  }
}
</style>

